<template>
	<view class="">
		<u-loading-page :loading="!isLogin"></u-loading-page>
		<view class="pages pt-20" v-if="isLogin">
			<!-- 选择门店 -->
			<view class="pages-card m-auto mb-20">
				<p-select-client></p-select-client>
			</view>
			<!-- 数据概况 -->
			<view class="pages-card m-auto mb-20">
				<view class="row-box mb-30">
					<view class="flex align-items-center">
						<text class="fc-3 fw-6 ">数据概况</text>
						<!-- <p-help :id="0"></p-help> -->
						<text class="fc-9 fc-blue ml-10" @click="getStatstics">刷新</text>
					</view>
					<!-- <view class="flex align-items-center" @click="$fn.toPages('/pages/dataCenter/dataCenter')">
					<text class=" fc-9">更多</text>
					<text class="ml-20 fc-9 iconfont ">&#xe687;</text>
				</view> -->
				</view>

				<view class="profiling-gird">
					<view class="gird-item mb-30 fcc" v-for="(item,index) in profiling" :key="index">
						<view class="gird-item-title">
							{{item.title}}
						</view>
						<view class="gird-item-value fc-ac">
							{{item.value}}
						</view>
					</view>
				</view>
			</view>

			<!-- 功能菜单 -->
			<view class="pages-card m-auto mb-20">
				<view class="row-box mb-30">
					<view class="flex">
						<text class="fc-3 fw-6">功能菜单</text>
					</view>
				</view>

				<view class="domain-gird">
					<view class="gird-item mb-30" v-for="(item,index) in domain" :key="index"
						@click="$fn.toPages(item.url)">
						<image :src="item.img" mode="scaleToFill" class="gird-item-img"></image>
						<view class="gird-item-title fs-sm">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>

			<!-- 我的代办 -->
			<view class="pages-card m-auto mb-20">
				<view class="row-box mb-30">
					<view class="flex fw-6">
						我的代办（{{todoList.length}}）
					</view>
					<view class="flex align-items-center">
						<text class=" fc-9">更多</text>
						<text class="ml-20 fc-9 iconfont ">&#xe687;</text>
					</view>
				</view>

				<view class="pages-card-conter" v-if="todoList&&todoList.length">
					<view class="row-box task-bar pt-20 pb-20" v-for="(item,index) in todoList " :key="index">
						<image class="row-img" src="/static/images/home/todo-1.png" mode="scaleToFill"></image>
						<view class="row-info">
							<view class="title fw-6 fc-3 out-1 mb-20">
								打标签
							</view>
							<view class="text fs-sm out-1">
								您还有10个客户未打标签
							</view>
						</view>
						<view class="row-state">
							<view class="time fs-sm fc-9 mb-20">
								2025/03/18 08:53
							</view>
							<view class="">
								&nbsp;
							</view>
						</view>
					</view>
				</view>

				<view class="" v-else>
					<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
				</view>
			</view>

			<!-- 我的任务 -->
			<view class="pages-card m-auto mb-20">
				<view class="row-box mb-30">
					<view class="flex fw-6">
						我的任务
					</view>
					<view class="flex align-items-center">
						<text class=" fc-9">更多</text>
						<text class="ml-20 fc-9 iconfont ">&#xe687;</text>
					</view>
				</view>
				<view class="pages-card-conter" v-if="taskList&&taskList.length">
					<view class="row-box task-bar pt-20 pb-20" v-for="(item,index) in taskList " :key="index">
						<image class="row-img" src="/static/images/home/task-1.png" mode="scaleToFill"></image>
						<view class="row-info">
							<view class="title fw-6 fc-3 out-1 mb-20">
								群发顾客
							</view>
							<view class="text fs-sm out-1">
								早安问候客户每日群发任务 </view>
						</view>
						<view class="row-state">
							<view class="time fs-sm fc-9 mb-20">
								2025/03/18 08:53
							</view>
							<view class="fs-sm tag-w">
								未完成
							</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
				</view>
			</view>

			<!-- 技术支持 -->
			<p-support class=""></p-support>
		</view>
	</view>
</template>

<script>
	import {
		apiGetStoreList,
		apiChangeStore,
		apiGetStatstics,
		apiOrderList
	} from '@/api/store.js'
	export default {
		components: {},
		data() {
			return {
				// 判断是不是已经走完应用的生命周期
				isLogin: false,
				// 数据概况
				profiling: [],
				// 待办
				todoList: [],
				// 任务
				taskList: [],
			}
		},
		async onLoad(q) {
			//当执行完APP生命周期中的onlaunch，再执行页面中的业务逻辑
			await this.$onLaunched;
			this.isLogin = true
			await this.getStatstics()
			await this.setProfiling()
			await this.getTodoList()

		},
		methods: {
			async getStatstics() {
				let res = await apiGetStatstics()
				this.profiling = [{
						title: '订单金额(元)',
						value: '¥' + res.order_price
					},
					{
						title: '订单数量',
						value: res.order_num
					},
					{
						title: '下单人数',
						value: res.order_people
					},
					{
						title: '退款订单数',
						value: res.refund_num
					},
					{
						title: '待到店自提',
						value: res.pickup_store_num
					},
					{
						title: '待到店使用',
						value: res.waiting_use_num
					},
				]

			},
			async setProfiling() {
				// await

			},
			async getTodoList() {
				this.todoList = []
			}
		},
		computed: {
			domain() {
				return [{
						img: '/static/images/home/nav-1.png',
						title: '门店订单',
						url: '/pages/order/order'
					},
					// {
					// 	img: '/static/images/home/nav-2.png',
					// 	title: '输码核销',
					// 	url: '/pages/verification/inputCode'
					// }, {
					// 	img: '/static/images/home/nav-3.png',
					// 	title: '扫码核销',
					// 	url: '/pages/verification/scanCode'
					// }, {
					// 	img: '/static/images/home/nav-4.png',
					// 	title: '自助核销',
					// 	url: '/pages/verification/selfService'
					// }, {
					// 	img: '/static/images/home/nav-5.png',
					// 	title: '核销记录',
					// 	url: '/pages/verification/record'
					// }, {
					// 	img: '/static/images/home/nav-6.png',
					// 	title: '配货单',
					// 	url: '/pages/delivery/delivery'
					// }, {
					// 	img: '/static/images/home/nav-7.png',
					// 	title: '商品中心',
					// 	url: '/pages/schedule/schedule'
					// }, 
					{
						img: '/static/images/home/nav-8.png',
						title: '佣金钱包',
						url: '/pages/commission/commission'
					},
					// {
					// 	img: '/static/images/home/nav-11.png',
					// 	title: '区域经理',
					// 	url: '/pages/area/manage'
					// }, {
					// 	img: '/static/images/home/nav-9.png',
					// 	title: '推广邀请',
					// 	url: '/pages/promotion/promotion'
					// }, {
					// 	img: '/static/images/home/nav-10.png',
					// 	title: '帮助中心',
					// 	url: '/pages/help/lists'
					// },
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {}

	.profiling-gird {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;


		.gird-item-value {
			font-size: 40rpx;
			line-height: 48rpx;
			margin: 12rpx 0;
		}
	}

	.domain-gird {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 20rpx;

		.gird-item {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			.gird-item-img {
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.task-bar {
		.row-img {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			overflow: hidden;
		}

		.row-info {
			width: 380rpx;

			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
			}

			.text {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
		}

		.row-state {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: flex-end;

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
		}

	}
</style>